<template>
  <div class="wrapper">
    <div class="top">
      <div class="tips">请输入消费金额</div>
      <div class="input">
        <span>￥</span>
        <input class="ipt" type="digit" @input="mobileInput" />
      </div>
      <p class="voucher">抵用券</p>
    </div>

    <div class="content">
      <div class="content-item">
        <span class="coupon-title">消费每满1000元减100元</span>
        <get-user-info :btn-class="'btn-coupon'" @checks="checks">
          <slot>买券更优惠</slot>
        </get-user-info>
      </div>
    </div>

    <div class="money">
      <div class="money-item">
        <span class="expenditure-amount">实付金额</span>
        <div class="preferential-amount">
          <div class="total-money">￥{{ money }}</div>
          <span>共优惠0元</span>
        </div>
      </div>
      <div class="btn">
        <get-user-info
          @checks="check"
          :btn-class="'btns'"
          style="flex:1;margin:0 40rpx;"
        >
          <slot>支 付</slot>
        </get-user-info>
        <button class="cancel btns" @click="back">取 消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { recommandCoupon } from '@/api'
import mixins from '@/mixins'
import getUserInfo from '@/components/get-user-info'
export default {
  components: {
    getUserInfo
  },
  mixins: [mixins],
  onLoad(e) {
    this.id = e.id
  },
  data() {
    return {
      money: 0,
      id: '',
      userId: ''
    }
  },
  methods: {
    mobileInput(e) {
      var price = e.detail.value
      price = price.replace(/[^\d.]/g, '') //清除“数字”和“.”以外的字符
      price = price.replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      price = price
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      price = price.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') //只能输入两个小数
      if (price.indexOf('.') < 0 && price != '') {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        price = parseFloat(price)
      }
      this.money = price
      return {
        value: price
      }
    },
    check() {
      //#ifdef MP-WEIXIN
      if (this.money > 0) {
        this.navigateTo('pay')
      } else {
        uni.showToast({
          title: '请输入金额!',
          duration: 1500,
          icon: 'none'
        })
      }
      //#endif
      //#ifdef MP-ALIPAY
      if (this.money > 0) {
        this.navigateTo('pay')
      } else {
        uni.showToast({
          title: '请输入金额!',
          duration: 1500,
          icon: 'none'
        })
      }
      //#endif
    },
    checks() {
      if (this.money <= 0) {
        uni.showToast({
          title: '请输入金额!',
          duration: 1000,
          icon: 'none'
        })
      } else if (this.money < 1000) {
        uni.showToast({
          title: '消费金额未达到购券要求!',
          duration: 1000,
          icon: 'none'
        })
      } else {
        this.recommandCoupons()
      }
    },
    recommandCoupons() {
      //#ifdef MP-WEIXIN
      recommandCoupon(this.money, this.id, this.openId).then(res => {
        if (res.resMsg === '没有可买优惠券') {
          uni.showToast({
            title: '本商铺未参加活动!',
            duration: 1500,
            icon: 'none'
          })
        } else if (res.data.couponIdList.length === 0) {
          uni.showToast({
            title: '您已有优惠券!',
            duration: 1500,
            icon: 'none'
          })
        } else {
          this.navigateTo('coupons')
        }
      })
      //#endif
    },
    navigateTo(address) {
      uni.navigateTo({
        url:
          `/pages/package/shop/component/${address}?money=` +
          this.money +
          '&id=' +
          this.id
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../../../static/css/order.css');

.content {
  -webkit-overflow-scrolling: touch;
  .content-item {
    display: flex;
    padding: 30rpx;
    border: 3px solid #dbdbdb;
    border-radius: 20rpx;
    margin: 20rpx 0;
    justify-content: space-between;
    align-items: center;
    .coupon-title {
      font-size: 18px;
    }
  }
}
.ipt {
  width: 100%;
  background: transparent;
  color: #fff;
}
</style>
